|
json格式
双向！
前端 ==>后端：json格式
后端 ==>前端：json格式
html
登录
var container = document.getElementById('container');
// 辅助函数：将一个新添加的用户(user)，放入form的下方容器的尾部显示
var show_added_user = function (user) {
var li = document.createElement("li");
li.innerText = user["id"] + " " + user["username"] + ":" + user["password"];
container.appendChild(li);
};
// 将formData数据转换为json数据，版本一
var convert_FormData_to_json = function (formData) {
var objData = {};
for (var entry of formData.entries()){objData[entry[0]] = entry[1];}
return JSON.stringify(objData);
};
// 将formData数据转换为json数据，版本二（箭头语法）
var convert_FormData_to_json2 = function (formData) {
var objData = {};
formData.forEach((value, key) => objData[key] = value);
return JSON.stringify(objData);
};
var formobj = document.querySelector('form');
//var formobj = document.getElementByTag('form');
formobj.addEventListener('submit', function(event){
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open('POST', '/users/');
xhr.setRequestHeader('Content-Type', 'application/json'); // （前端）声明json格式
xhr.send(convert_FormData_to_json(new FormData(formobj)));// （前端）发送json数据
xhr.addEventListener('loadend', function() {
if(xhr.status == 201){ // 201，去看app.py！！
var user = JSON.parse(xhr.responseText); // （前端）处理接收的json数据
show_added_user(user)
//users.map(show_added_user); // 如果返回users list，则可用map！！
}
}, false);
}, false);
app.py
# app.py
# 查询
@app.route('/users', methods=['GET'])
def show_user(user_id):
users = User.query.all()
return jsonify(users) # （后端）发送json数据
# 查询一个
@app.route('/users/', methods=['GET'])
def show_user(user_id):
user = User.query.filter_by(id=user_id).first()
return jsonify(user) # （后端）发送json数据
# 添加
@app.route('/users/', methods=['POST'])
def add_user():
username, password = request.json['username'], request.json.get('password', "") # （后端）处理接收的json数据
user = User(username, password) # 自动多了id
db.session.add(user)
db.session.commit()
return jsonify(user), 201 # （后端）发送json数据
FormData格式
单向！
前端 ==>后端：FormData格式
后端 ==>前端：json格式
html
登录
var container = document.getElementById('container');
// 辅助函数：将一个新添加的用户(user)，放入form的下方容器的尾部显示
var show_added_user = function (user) {
var li = document.createElement("li");
li.innerText = user["id"] + " " + user["username"] + ":" + user["password"];
container.appendChild(li);
};
var formobj = document.querySelector('form');
//var formobj = document.getElementByTag('form');
formobj.addEventListener('submit', function(event){
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open('POST', '/users/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // （前端）声明form格式 注意这里对应前面：application/x-www-form-urlencoded
xhr.send(new FormData(formobj)); // （前端）发送form数据
xhr.addEventListener('loadend', function() {
if(xhr.status == 201){ // 201，去看app.py！！
var user = JSON.parse(xhr.responseText); // （前端）处理接收的json数据
show_added_user(user)
//users.map(show_added_user); // 如果返回users list，则可用map！！
}
}, false);
}, false);
app.py
# app.py
# 查询
@app.route('/users', methods=['GET'])
def show_user(user_id):
users = User.query.all()
return jsonify(users) # （后端）发送json数据
# 查询一个
@app.route('/users/', methods=['GET'])
def show_user(user_id):
user = User.query.filter_by(id=user_id).first()
return jsonify(user) # （后端）发送json数据
# 添加
@app.route('/users/', methods=['POST'])
def add_user():
username, password = request.form['username'], request.form.get('password', "") # （后端）处理接收的form数据
user = User(username, password) # 自动多了user_id
db.session.add(user)
db.session.commit()
return jsonify(user), 201 # （后端）发送json数据
|